<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>product page</title>
    <script src="/js/axios.min.js"></script>
    <style>
        input[type='text'],
        input[type = 'number'],
        textarea {
            width: 350px;
        }

        textarea {
            height: 110px;
        }
    </style>
</head>
<body>
<h1>product page</h1>
<h3>create product</h3>
<form id="create_product_form">
    <input type="text" name="title"><br>
    <input type="text" name="subtitle"><br>
    <input type="number" min="0.01" max="99999999.99" step="0.01" name="price"><br>
    <textarea name="description"></textarea>
    <br>

    <input type="radio" name="deleted" value="0" checked> 未删除
    <input type="radio" name="deleted" value="1"> 已删除
    <br>

    <input type="radio" name="published" value="0"> 未上架
    <input type="radio" name="published" value="1" checked> 已上架
    <br>

    <input type="radio" name="recommended" value="0"> 未推荐
    <input type="radio" name="recommended" value="1" checked> 已推荐 <br>
    <br>

    主图
    <input type="file" name="file"><br>
    <br>

    图集
    <input type="file" name="files" multiple><br>
    <br>

    <input type="submit" value="create product">
</form>
<script>
    const createProductFrom = document.getElementById('create_product_form');
    const headers = {'Content-Type': 'multipart/form-data'};
    const type = {type: 'application/json'};

    createProductFrom.addEventListener('submit', function (event) {
        event.preventDefault();

        let formData = new FormData(createProductFrom);
        let data = Object.fromEntries(formData)
        data = {...data, files: formData.getAll('files')}
        formData.append('product', new Blob([JSON.stringify(data)], type));

        axios.post('/product/create', formData, {headers: headers}).then(res => {
            console.log(res.data);
        }).catch(err => {
            console.error(err);
        });
    })
</script>
</body>
</html>